<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特效只是:DOM操作+想象力</title>
</head>
<style type="text/css">
	#ad{
		width: 1024px;
		height: 768px;
		overflow: hidden;
		position: relative;<!--相对定位,为了123-->
	}
	ul{
		<!--ul样式-->
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
	li{
		<!--li样式-->
		float: left;
		width: 20px;
		height: 20px;
		border: 1px solid aqua;
		list-style: none;
		margin: 0px 10px;
	}
	.active{
		background: pink;
	}
</style>
<body>
	<div id="ad">
		<img src="a.jpg" alt="" />
		<img src="b.jpg" alt="" />
		<img src="c.jpg" alt="" />

		<ul>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="./jquery-3.1.1.js"></script>
<script type="text/javascript">
	var i=0; 
	setInterval(function(){
		$('img:first').fadeOut(1000,function(){
			$('img:first').appendTo('#ad');
			$('img:last').show();
			//应该是2的带active
			//先删除所有的class,在计算一下
			$('li').removeClass();
			$($('li').get(++i%3)).addClass('active');
			// $('li').get(++i%3).className = 'active';
		});
	},2000);
</script>
</html>